<template>
  <div class="content">
    <!-- 轮播图 -->
    <swiper
      class="swiper"
      circular
      :indicator-dots="indicatorDots"
      :autoplay="autoplay"
      :interval="interval"
      :duration="duration"
    >
      <!-- <swiper-item v-for="(item, index) in swiperList" :key="index">-->
      <swiper-item>
        <div class="swiper-item">
          <img src="../../static/4.jpg" alt="" />
        </div>
      </swiper-item>
      <swiper-item>
        <div class="swiper-item">
          <img src="../../static/5.jpg" alt="" />
        </div>
      </swiper-item>
      <swiper-item>
        <div class="swiper-item">
          <img src="../../static/6.jpg" alt="" />
        </div>
      </swiper-item>
    </swiper>

    <!-- 信息框 -->

    <div class="info-box">
      <div class="info-box-name"> {{ hospital.name }} </div>
      <div class="info-box-tag">
        <span v-for="(item, index) in hospital.tag" :key="index">
          {{ item }}
        </span>
      </div>
      <div class="info-box-time">
        <div class="time-title">体检时间</div>
        <span class="time">
          {{ hospital.time }}
        </span>
        <span class="phone">
          <img src="../../static/phone.png" alt="" />
        </span>
      </div>
      <div class="info-box-address">
        <span class="address-title"> 机构地址</span>
        <div class="address">{{ hospital.address }}</div>
      </div>
    </div>

    <!-- 预约 -->
    <div class="appointment">
      <div class="appointment-box" @click="toSingleApp()">
        <div class="single-img">
          <img src="../../static/singleApp.png" alt="个人体检预约" />
        </div>
        <div class="single-title">个人体检预约</div>
      </div>
      <div class="appointment-box" @click="toTeamApp()">
        <div class="single-img">
          <img src="../../static/teamApp.png" alt="团队预约" />
        </div>
        <div class="single-title">团队预约</div>
      </div>
      <div class="appointment-box" @click="toMyApp()">
        <div class="single-img">
          <img src="../../static/myApp.png" alt="我的预约" />
        </div>
        <div class="single-title">我的预约</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      swiperList: [
        {
          url: "https://cn.bing.com/images/search?q=%E5%9B%BE%E7%89%87&FORM=IQFRBA&id=61EBDB2C54DA1EC9028B830C825D9CD5273E8601",
        },
        {
          url: "https://cn.bing.com/images/search?q=%E5%9B%BE%E7%89%87&FORM=IQFRBA&id=61EBDB2C54DA1EC9028B830C825D9CD5273E8601",
        },
        {
          url: "https://cn.bing.com/images/search?q=%E5%9B%BE%E7%89%87&FORM=IQFRBA&id=61EBDB2C54DA1EC9028B830C825D9CD5273E8601",
        },
        {
          url: "https://cn.bing.com/images/search?q=%E5%9B%BE%E7%89%87&FORM=IQFRBA&id=61EBDB2C54DA1EC9028B830C825D9CD5273E8601",
        },
      ],
      hospital: {
        name: "河南黄河科技学院附属医院健康管理中心",
        tag: ["提前1天可预约", "支持加项"],
        time: "周一到周日上午8:00-中午12:00",
        address: "河南省郑州市管城回族区紫金山南路与贺江路交叉口向西200米路南",
      },
    };
  },
  onLoad() {},
  methods: {
    // 跳转 个人预约
    toSingleApp() {
      wx.navigateTo({
        url: "/pages/phyExamApp/singleApp/index",
      });
    },
    // 跳转 我的预约
    toMyApp(){
      wx.navigateTo({
        url: '/pages/phyExamApp/myApp/index'
      })
    },
    // 跳转 团队预约
    toTeamApp(){
      wx.navigateTo({
        url: '/pages/phyExamApp/teamApp/index'
      })
    }
  },
};
</script>

<style lang="less" scoped>
.swiper {
  height: 300rpx;
}
.swiper-item {
  display: block;
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  img {
    width: 100%;
    height: 100%;
  }
}

.info-box {
  height: fit-content;
  // border: 1px solid red;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  padding: 12px;
  color: #606266;
  line-height: 1.4;
  text-align: justify;
  font-size: 14px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  word-break: break-all;
  margin: 4px;

  .info-box-name {
    font-size: 16px;
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
  }
  .info-box-tag {
    font-size: 12px;
    margin: 8px 2px;
    span {
      width: fit-content;
      border: 1px solid #ebeef5;
      padding: 2px;
      margin: 0px 4px;
      color: #c5c6c9;
    }
  }
  .info-box-time {
    margin-top: 10px;
    font-size: 12px;
    line-height: 20px;
    position: relative;
    padding: 10px 0;
    display: flex;
    .time-title {
      width: 60px;
      // border: 1px solid red;
    }
    .time {
      margin-left: 20px;
    }
    .phone {
      position: absolute;
      right: 2%;
      height: 20px;
      width: 20px;
      img {
        height: 100%;
        width: 100%;
      }
    }
  }

  .info-box-address {
    margin-top: 10px;
    font-size: 12px;
    height: 40px;
    display: flex;
    .address-title {
      width: 80px;
      // border: 1px red solid;
    }
    .address {
      display: inline-table;
      margin-left: 20px;
      line-height: 20px;
      // border: 1px solid red;
    }
  }
}
.appointment {
  margin-top: 10px;
  font-size: 16px;
  display: flex;
  flex-wrap: wrap;
  .appointment-box {
    height: 100px;
    width: 47%;

    border: 1px solid #ebeef5;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 1px 1px;
    padding: 2px;
    .single-img {
      height: 40px;
      width: 40px;
      margin: 4px;
      img {
        height: 100%;
        width: 100%;
      }
    }
    .single-title {
      font-size: 14px;
    }
  }
}
</style>
